import React, { Component } from 'react';
import { connect, } from 'react-redux';
import moment from 'moment';
import request from '../api/request'
import { getImgUrl, openSherd } from '../utils/utils'
import { SET_LUCKY_DRAW } from '../actions/actions'
import RotatePlay from '../components/RotatePlay'

class LuckyDraw extends Component {
    constructor(props) {
        super(props)
        this.state = {
            startList: [{
                describePic: '',
                title: '谢谢参与',
                id: 0
            }],
            luckyDrawRecord: []
        }
    }

    componentDidMount() {
        const { dispatch, luckyDraw, user } = this.props
        request.projectInfo({ id: 2 }).then(res => {
            dispatch({
                type: SET_LUCKY_DRAW,
                data: res.data
            })
        })

        this.getLuckyDrawRecord()
        request.getLuckyDraw({ award: '1' }).then(res => {
            let startList = this.state.startList
            startList = startList.concat(res.data)
            this.setState({
                startList: startList
            })
        })
    }

    getLuckyDrawRecord = () => {
        const { user } = this.props
        request.getLuckyDrawRecord({ openid: user.openid }).then(res => {
            console.log(res)
            this.setState({
                luckyDrawRecord: res.data
            })
        })
    }

    render() {
        const { luckyDraw, dispatch } = this.props;
        const { startList, luckyDrawRecord } = this.state;
        let isBetween = moment().isBetween(luckyDraw.timeStart, luckyDraw.timeEnd) || moment().isSame(luckyDraw.timeStart, 'days') || moment().isSame(luckyDraw.timeEnd, 'days')
        if (isBetween) {
            return (
                <div>
                    <div className="home-title"><img src={require('../static/image/home-top.png')} alt="" /></div>
                    <div className="rotatePlay-box">
                        <RotatePlay end={this.getLuckyDrawRecord} startList={startList} />
                    </div>
                    <div className="line"></div>
                    <div className="luckyDrawList">
                        <h4>抽奖记录</h4>
                        {luckyDrawRecord.map((item, index) => {
                            return (
                                <p key={index}>
                                    <span>{item.updatedTime}</span>
                                    <span>{item.name}</span>
                                    <span>{item.luckyDraw}</span>
                                </p>
                            )
                        })}
                        <p></p>
                    </div>
                </div>
            )
        } else {
            return (
                <div className="questions-cotnent" >
                    <div className="home-title"><img src={require('../static/image/home-top.png')} alt="" /></div>
                    <div className="rotatePlay-box">
                        <div className="questions-tol-title">
                            <img src={require('../static/image/text-choujing.png')} alt="" />
                            {/* <p className="subtitle">请{gameInfo.timeStart}至{gameInfo.timeEnd}参加活动</p> */}
                        </div>
                    </div>
                    <div className="render-home-btns">
                        <div className="home-btns">
                            <div className="go" onClick={() => this.props.history.push('/questions/')}><img src={require('../static/image/btn-goHome.png')} alt="" /></div>
                        </div>
                        <div className="home-cell">
                            <div className="icon" onClick={() => this.props.history.push('/questions/list')}><img src={require('../static/image/icon-paihangbang.png')} alt="" /></div>
                            <div className="icon" onClick={() => openSherd(dispatch)}><img src={require('../static/image/icon-fxhaoyou.png')} alt="" /></div>
                        </div>
                    </div>
                </div>
            )
        }

    }
}
export default connect(({ user, code, luckyDraw }) => ({ user, code, luckyDraw }))(LuckyDraw);
